<template>
  <div class="contArticle">
    <!-- 标题 -->
    <div class="contArticle_tit">
      <h2>{{ newsById.newsTitle }}</h2>
    </div>
    <div class="contArticle_author">
      <div class="info ">
        <p>来源：{{ newsById.createBy }}</p>
        <span>{{ newsById.createTime }}</span>
      </div>
      <div class="info-r">{{ newsById.click }}人已阅</div>
    </div>

    <div class="news_text">
      <div class="editor ql-container ql-snow">
        <div style="margin-top: 15px;font-weight: 400;text-align: justify;font-size: 16px;line-height: 2;" class="ql-editor" v-html="newsById.newsContent"></div>
      </div>

      <!--        <div if="newsById.img.length>0" v-for="(item,index) in newsById.img" :key="index">
                &lt;!&ndash;          <img style="width: 100%;text-align: center;height: 100%" :src="item.url">&ndash;&gt;
                <img style="width: 100%;text-align: center;" :src="item.url">
              </div>-->
    </div>
    <van-divider/>
    <!-- <span class="date" v-html="item.newsContent">{{ item.newsContent}}</span> -->
  </div>
</template>
<script>
import {getNews, getUpNews, getNextNews, updateNewsClick} from '@/api/news'

export default {
  data() {
    return {
      newsList: [], // 新闻数据
      newsById: {}, //单条新闻
      newsListClick: [],
    }
  },
  computed: {},
  mounted() {
    this.getList(this.$root.$mp.query.id)

  },
  created() {
  },
  onPullDownRefresh() {
    console.log('下拉')
    //wx.stopPullDownRefresh();
    this.getList(this.$root.$mp.query.id)
  },
  onReachBottom() {
    // 到这底部在这里需要做什么事情
    //this.loadMore();
  },
  methods: {
    getList(id) {
      getNews(id).then(response => {
        this.newsById = response.data
        /*this.newsById.img = this.change(this.newsById.img)
        console.log("img", this.changeUrl(this.newsById.img[0].fileName))
        this.newsById.img.map(item => {
          item.url = this.changeUrl(item.fileName)
        })*/
      })
    },

  }
}


</script>
<style scoped>
.contArticle{
padding: 0 4%;
}

.contArticle_tit {
  width: 100%;
  font-size: 26px;
  line-height: 37px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  padding: 10px 0;
  letter-spacing: 0;
  color: #333;
  text-align: justify;
}
.contArticle_author{
  width: 100%;
  right: 0px;
  color: #999;
  font-size: 1em;
  position: relative;
  display: block;
}
.info {
  display: inline-block;
}
.info p {
  font-size: 14px;
  margin-top: 0px;
  color: #757575;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 400;
  word-wrap: break-word;
  text-align: justify;
}
.info span {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: #C2C2C2;
  letter-spacing: 0;
  margin-right: 10px;
}

.info-r {
  color: #A1A1A1;
  letter-spacing: 0;
  font-size: 10px;
  background: #F6F6F6;
  border-radius: 1px;
  font-family: PingFangSC-Medium;
  line-height: 22px;
  position: absolute;
  right: 0px;
  bottom: 0;
  padding: 0 2.4%;
}

.news_text {
  /*background-color: rgb(255, 255, 255);*/
  /*!*width: 95%;*!*/
  /*margin: 20 rpx 20 rpx 15 rpx;*/
  /*-moz-box-shadow: 2 rpx 2 rpx 5 rpx #969696;*/
  /*-webkit-box-shadow: 2 rpx 2 rpx 5 rpx #838080;*/
  /*box-shadow: 2 rpx 2 rpx 5 rpx #969696;*/
  /*display: flex;*/
  /*padding: 0 0px;*/
  /*flex-wrap: wrap;*/
  /*border-radius: 5px;*/
  margin: 15px 0;
}



.title {
  color: #070707;
}

.time {
  text-align: right;
  color: #35353598;
  font-size: 10pt;
}
</style>
